<template>
	<view class="flex-col page">
		<view class="flex-col flex-auto group">
			<view class="flex-col section_3">
				<view class="flex-row justify-between items-center group_2">
					<text class="text">{{data.content.status_name}}</text>
					<view class="flex-col justify-start items-center button" v-if="data.content.status==2" @click="toReceipt">
						<text class="text_2">确认接单</text>
					</view>
					<view class="flex-col justify-start items-center button" v-if="data.content.status==3" @click="data.show=true">
						<text class="text_2">核销</text>
					</view>
				</view>
				<view class="flex-col section_4 space-y-41">
					<text class="self-start font_1">用户信息</text>
					<view class="flex-row justify-between items-center">
						<view class="flex-row items-center space-x-21">
							<view class="relative">
								<image class="image_8" :src="data.content.avatar" />
								<image src="/static/vip.png" class="pos1" v-if="data.content.vip=1" mode=""></image>
							</view>
							<text class="font_1">{{data.content.nickname}}</text>
						</view>
						<text class="text_3" @click="toPhone">联系Ta</text>
					</view>
				</view>
			</view>
			<view class="flex-col group_3 space-y-20">
				<view class="flex-col section_5 space-y-41">
					<text class="self-start font_1">服务清单</text>
					<view class="flex-row justify-between" v-for="(item,index) in data.content.goods_list" :key="index">
						<view class="flex-row items-center space-x-18">
							<image class="image_9" :src="item.cover_path" />
							<view class="flex-col items-start space-y-67">
								<text class="font_1 text_4">{{item.service_name}}</text>
								<view class="group_4">
									<text class="font_2">￥</text>
									<text class="font_1 text_5">{{item.price}}</text>
								</view>
							</view>
						</view>
						<text class="self-start text_6">数量：×{{item.quantity}}</text>
					</view>
				</view>
				<view class="flex-col section_6">
					<view class="flex-col group_5 space-y-41">
						<text class="self-start font_1 text_7">费用信息</text>
						<view class="flex-row justify-between">
							<text class="font_3">服务总额</text>
							<text class="font_4 text_8">￥{{data.content.goods_amounts}}</text>
						</view>
						<view class="flex-row justify-between items-center">
							<text class="font_3">优惠券抵扣</text>
							<text class="font_4 text_9">-￥{{data.content.coupon_amounts}}</text>
						</view>
					</view>
					<view class="flex-col items-end group_6 space-y-29">
						<view class="group_7">
							<text class="font_6">合计金额：￥</text>
							<text class="font_5 text_10">{{data.content.pay_amounts}}</text>
						</view>
						<view class="group_8">
							<text class="font_6">实付金额：</text>
							<text class="font_2">￥</text>
							<text class="font_5 text_11">{{data.content.pay_amounts}}</text>
						</view>
					</view>
				</view>
				<view class="flex-col section_7 space-y-41">
					<text class="self-start font_1">订单信息</text>
					<view class="flex-row justify-between items-center">
						<text class="font_3">订单编号</text>
						<text class="font_4">{{data.content.order_sn}}</text>
					</view>
					<view class="flex-row justify-between items-center">
						<text class="font_3">下单时间</text>
						<text class="font_4 text_12">{{data.content.create_time}}</text>
					</view>
					<view class="flex-row justify-between">
						<text class="font_3">支付方式</text>
						<text class="font_4 text_13">{{data.content.payment_name}}</text>
					</view>
					<view class="flex-row justify-between" v-if="data.content.remark != ''">
						<text class="font_3">地址备注</text>
						<text class="font_4 text_13">{{data.content.remark}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
	<u-popup :show="data.show" :round="10" :closeable="true" mode="center" @close="data.show=false">
		<view class=""  style="padding:40rpx;pa">
			<div class="title" style="height: auto;margin-top: 0;margin-bottom: 40rpx;">请输入核销码</div>
			<view class="popupInput">
				<input type="text" placeholder="请输入" v-model="data.use_sn">
			</view>
			<view class=" flex-row justify-around items-center">
				<view class="btnLeft flex-row justify-center items-center" @click="data.show=false">取消</view>
				<view class="btnLeft btnBg flex-row justify-center items-center" @click="getUse">确定</view>
			</view>
		</view>
	</u-popup>
	<u-popup :show="data.show1" :round="10" :closeable="true" mode="center" @close="data.show1=false">
		<view class=""  style="padding:40rpx;pa">
			<div class="title" style="height: auto;margin-top: 0;margin-bottom: 40rpx;">请输入核销码</div>
			<view class="flex-row justify-between">
				<view class="flex-row items-center space-x-18">
					<image class="image_7" :src="data.usePage.cover_path" />
					<view class="flex-col items-start space-y-67" style="width: 83%;">
						<text class="font_6 text_6">{{data.usePage.service_name}}</text>
						<view class="flex-row items-center justify-between" style="width: 100%;">
							<view class="group_3">
								<text class="font_9">￥</text>
								<text class="font_7">{{data.usePage.price}}</text>
							</view>
							<text class="self-start font_8">数量：×{{data.usePage.quantity}}</text>
						</view>
						
					</view>
				</view>
			</view>
			<view class="flex-row justify-between items-center font11" style="margin-top: 40rpx;">
				<text>订单号</text>
				<text>{{data.usePage.order_sn}}</text>
			</view>
			<view class="flex-row justify-between items-center font11">
				<text>下单时间</text>
				<text>{{data.usePage.create_time}}</text>
			</view>
			<view class="flex-row justify-between items-center font11">
				<text>支付方式</text>
				<text>{{data.usePage.payment_name}}</text>
			</view>
			<view class="flex-row justify-between items-center font11" style="margin-bottom: 40rpx;">
				<text>手机号</text>
				<text>{{data.usePage.mobile}}</text>
			</view>
			<view class=" flex-row justify-around items-center">
				<view class="btnLeft btnBg flex-row justify-center items-center" style="width: 490rpx;" @click="toUse">确定</view>
			</view>
		</view>
	</u-popup>
</template>

<script setup>
	import {
		onShow,
		onLoad
	} from "@dcloudio/uni-app";
	import {
		onMounted,
		ref,
		reactive,
		getCurrentInstance
	} from "vue"
	const {
		proxy
	} = getCurrentInstance()
	onLoad((option) => {
		data.value.order_id = option.order_id
		getDate()
		// uni.$on('detail', function(data) {
		// 	console.log(data);
		// 	getDate()
		// })
	})
	let data = ref({
		order_id: '',
		index: '',
		content: {},
		whyList: ['123', '23', '12345'],
		cause: 0,
		selectList: [],
		show: false,
		show1: false,
		use_sn:'',
		usePage:{}
	})
	const getDate = () => {
		proxy.$req.requestPOST(proxy.$api.OrderInfoInfo.orderDetail, {
			shop_id: uni.getStorageSync('shop_id') | '',
			order_id: data.value.order_id,
		}).then(res => {
			if (res.flag == "success") {
				data.value.content = res.data
			}else{
				uni.showToast({
					title: res.message,
					icon: 'error'
				})
			}
		})
	}
	const toReceipt = () => {
		proxy.$req.requestPOST(proxy.$api.OrderInfoInfo.receipt, {
			order_id: data.value.order_id,
			shop_id: uni.getStorageSync('shop_id') || '',
		}).then(res => {
			console.log(res)
			uni.showToast({
				title:res.message,
				icon:'none'
			})
			if(res.flag=="success"){
				setTimeout(()=>{
					getDetail(index)
				},1000)
			}
		})
	}
	const getUse =()=>{
		proxy.$req.requestPOST(proxy.$api.OrderInfoInfo.usePage, {
			use_sn: data.value.use_sn,
			shop_id: uni.getStorageSync('shop_id') || '',
		}).then(res => {
			console.log(res)
			if(res.flag=="success"){
				data.value.show=false
				data.value.usePage=res.data
				data.value.show1=true
			}else{
				uni.showToast({
					title:res.message,
					icon:'none'
				})
			}
		})
	}
	const toUse = () => {
		proxy.$req.requestPOST(proxy.$api.OrderInfoInfo.doUse, {
			use_sn: data.value.use_sn,
			shop_id: uni.getStorageSync('shop_id') || '',
		}).then(res => {
			console.log(res)
			uni.showToast({
				title:res.message,
				icon:'none'
			})
			if(res.flag=="success"){
				data.value.show=false
			}
		})
	}
	const toAfter = () => {
		proxy.$req.requestPOST(proxy.$api.OrderInfoInfo.useList, {
			shop_id: uni.getStorageSync('shop_id') | '',
			order_id: data.value.order_id
		}).then(res => {
			if (res.flag == "success") {
				data.value.selectList = res.data.list
				data.value.show1 = true
			} else {
				uni.showToast({
					title: res.message,
					icon: 'error'
				})
			}
		})
	}
	
	const toPay = () => {
		proxy.$req.requestPOST(proxy.$api.OrderInfoInfo.doPay, {
			order_id: data.value.order_id,
			payment: 'wepay'
		}).then(res1 => {
			if (res1.flag == "success") {
				let parm = res1.data
				wx.requestPayment({
					timeStamp: parm.timestamp,
					nonceStr: parm.noncestr,
					package: parm.package,
					signType: parm.signType,
					paySign: parm.sign,
					success(res2) {
						console.log(res2);
						uni.showToast({
							title: "支付成功",
							icon: 'success'
						})
						setTimeout(() => {
							getDate()
						}, 1000)
					},
					fail(res2) {
						console.log(res2);
						uni.showToast({
							title: "支付失败",
							icon: 'error'
						})
						setTimeout(() => {
							getDate()
						}, 1000)
					}
				})

			} else {
				uni.showToast({
					title: res1.message,
					icon: "none"
				})
			}
		}).catch(err => {
			console.log(err);
		})
	}
	const toLoat = () => {
		uni.openLocation({
			latitude: data.value.content.lat * 1,
			longitude: data.value.content.lng * 1,
			complete: function(res) {
				console.log('complete', res);
			}
		});
	}
	const toPhone = (type) => {
		uni.makePhoneCall({
			phoneNumber: data.value.content.member_account //仅为示例
		});
	}
	const toEvaluate = () => {
		uni.navigateTo({
			url: '/pages/evaluate/evaluate?order_id=' + data.value.order_id + '&shop_id=' + data.value.content
				.shop_id
		})
	}

	const toRefund = () => {
		uni.navigateTo({
			url: '/pages/applyFor/applyFor?order_id=' + data.value.order_id
		})
	}
	const toSchedule = () => {
		uni.navigateTo({
			url: '/pages/speed/speed?order_refund_id=' + v.order_refund_id
		})
	}
</script>

<style scoped lang="scss">
	.page {
		background-color: #f8f8f8;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;

		.group {
			padding-bottom: 75rpx;
			overflow-y: auto;

			.section_3 {
				padding: 0 30rpx 10rpx;
				background-image: linear-gradient(0deg, #f8f8f8 0%, #eff5f0 100%);

				.group_2 {
					padding: 30rpx 0;

					.text {
						color: #333333;
						font-size: 36rpx;
						font-family: PingFangSC;
						line-height: 35rpx;
					}

					.button {
						padding: 18rpx 0;
						background-color: #54bc6e;
						background-image: linear-gradient(0deg, #00a796 0%, #54bc6e 100%);
						border-radius: 16rpx;
						width: 160rpx;
						height: 62rpx;

						.text_2 {
							color: #ffffff;
							font-size: 26rpx;
							font-family: PingFangSC;
							line-height: 25rpx;
						}
					}
				}

				.section_4 {
					padding: 35rpx 30rpx 42rpx;
					background-color: #ffffff;
					border-radius: 20rpx;

					.space-x-21 {

						&>view:not(:first-child),
						&>text:not(:first-child),
						&>image:not(:first-child) {
							margin-left: 21rpx;
						}

						.image_8 {
							width: 60rpx;
							height: 60rpx;
							border-radius: 50%;
						}
					}
					.pos1{
						width: 24rpx;
						height: 24rpx;
						position: absolute;
						bottom: 10rpx;
						right: 0;
						z-index: 9;
					}
					.text_3 {
						color: #54bc6e;
						font-size: 28rpx;
						font-family: PingFangHeiTC;
						line-height: 27rpx;
					}
				}
			}

			.group_3 {
				padding: 10rpx 30rpx;

				.section_5 {
					padding: 35rpx 28rpx 42rpx;
					background-color: #ffffff;
					border-radius: 20rpx;

					.space-x-18 {

						&>view:not(:first-child),
						&>text:not(:first-child),
						&>image:not(:first-child) {
							margin-left: 18rpx;
						}

						.image_9 {
							border-radius: 20rpx;
							width: 160rpx;
							height: 160rpx;
						}

						.space-y-67 {

							&>view:not(:first-child),
							&>text:not(:first-child),
							&>image:not(:first-child) {
								margin-top: 67rpx;
							}

							.text_4 {
								margin-left: 6rpx;
							}

							.group_4 {
								line-height: 25rpx;

								.text_5 {
									color: #ff3333;
									line-height: 25rpx;
								}
							}
						}
					}

					.text_6 {
						margin-top: 117rpx;
						color: #999999;
						font-size: 24rpx;
						font-family: PingFang SC;
						line-height: 23rpx;
					}
				}

				.section_6 {
					padding-left: 30rpx;
					padding-right: 23rpx;
					background-color: #ffffff;
					border-radius: 20rpx;

					.group_5 {
						padding: 35rpx 0 41rpx;
						border-bottom: solid 2rpx #f8f8f8;

						.text_7 {
							margin-left: 3rpx;
						}

						.text_8 {
							line-height: 23rpx;
						}

						.text_9 {
							margin-right: 10rpx;
							color: #ff3333;
						}
					}

					.group_6 {
						padding: 30rpx 4rpx;

						.group_7 {
							line-height: 31rpx;

							.text_10 {
								color: #333333;
							}
						}

						.group_8 {
							line-height: 31rpx;

							.text_11 {
								color: #ff3333;
							}
						}

						.font_6 {
							font-size: 24rpx;
							font-family: PingFangSC;
							line-height: 23rpx;
							color: #333333;
						}

						.font_5 {
							font-size: 40rpx;
							font-family: PingFangSC;
							line-height: 31rpx;
						}
					}

					.space-y-29 {

						&>view:not(:first-child),
						&>text:not(:first-child),
						&>image:not(:first-child) {
							margin-top: 29rpx;
						}
					}
				}

				.font_2 {
					font-size: 24rpx;
					font-family: PingFangSC;
					line-height: 19rpx;
					color: #ff3333;
				}

				.section_7 {
					padding: 35rpx 16rpx 42rpx 30rpx;
					background-color: #ffffff;
					border-radius: 20rpx;

					.text_12 {
						margin-right: 8rpx;
					}

					.text_13 {
						margin-right: 12rpx;
						line-height: 27rpx;
					}
				}

				.font_3 {
					font-size: 28rpx;
					font-family: PingFangSC;
					line-height: 27rpx;
					color: #333333;
				}

				.font_4 {
					font-size: 28rpx;
					font-family: PingFangHeiTC;
					line-height: 21rpx;
					color: #333333;
				}
			}

			.space-y-20 {

				&>view:not(:first-child),
				&>text:not(:first-child),
				&>image:not(:first-child) {
					margin-top: 20rpx;
				}
			}

			.space-y-41 {

				&>view:not(:first-child),
				&>text:not(:first-child),
				&>image:not(:first-child) {
					margin-top: 41rpx;
				}
			}

			.font_1 {
				font-size: 32rpx;
				font-family: PingFangSC;
				line-height: 31rpx;
				color: #333333;
			}
		}
	}
	.font11 {
		font-size: 30rpx;
		font-family: PingFangSC;
		line-height: 30rpx;
		color: #333;
		margin: 22rpx 0;
	}
	.space-x-18 {
	
		&>view:not(:first-child),
		&>text:not(:first-child),
		&>image:not(:first-child) {
			margin-left: 18rpx;
		}
	
		.image_7 {
			border-radius: 20rpx;
			width: 160rpx;
			height: 160rpx;
		}
	
		.space-y-67 {
	
			&>view:not(:first-child),
			&>text:not(:first-child),
			&>image:not(:first-child) {
				margin-top: 67rpx;
			}
	
			.text_6 {
				margin-left: 6rpx;
			}
	
			.group_3 {
				line-height: 25rpx;
	
				.font_9 {
					font-size: 24rpx;
					font-family: PingFangSC;
					line-height: 19rpx;
					color: #ff3333;
				}
	
				.font_7 {
					font-size: 32rpx;
					font-family: PingFangSC;
					line-height: 25rpx;
					color: #ff3333;
				}
			}
		}
	}
	
	.font_8 {
		font-size: 24rpx;
		font-family: PingFang SC;
		line-height: 23rpx;
		color: #999999;
	}
	
	.text_7 {
		margin-top: 117rpx;
	}
	.title {
		width: 100%;
		height: 90rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		margin-top: 19rpx;
	}
	.popupInput{
		width: 100%;
		background: #F6F8FA;
		border-radius: 10rpx;
		padding: 20rpx 30rpx;
		margin-top: 20rpx;
		margin-bottom: 45rpx;
		>input{
			width: 100%;
			color: #333;
		}
	}
	.btnLeft{
		width: 240rpx;
		height: 88rpx;
		border: 2px solid #BDBDBD;
		border-radius: 24rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
		margin-right: 20rpx;
	}
	.btnBg{
		background: #54BC6E;
		border: 2px solid #54BC6E;
		color: #FFFFFF;
		margin-right: 0rpx;
	}
</style>